<template>
  <div @keyup.enter="onSearch">
    <el-row>
      <div class="search-form">
        <el-form label-width="80px" @submit.native.prevent>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('time')">
                <el-date-picker
                  v-model="daterange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item> </el-col
          ></el-row>
          <!--          关键字搜索-->
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('keyword')">
                <el-input
                  v-model="formData.key"
                  placeholder="通过描述搜索"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('type')">
                <el-select
                  v-model="formData.type"
                  placeholder="请选择类型"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="right" style="margin-right: 40px">
            <el-form-item>
              <el-button type="primary" @click="onSearch">{{
                $t("search")
              }}</el-button>
              <el-button @click="onClear()">{{ $t("clear") }}</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'LogSearchPanel',
  data() {
    const endDate = new Date() // 当前时间
    const startDate = new Date(endDate.getTime() - 60 * 60 * 1000) // 最近一小时
    return {
      daterange: [startDate, endDate],
      formData: {
        key: '',
        start: '',
        end: '',
        type: '0'
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一小时',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      typeOptions: [
        {
          value: '0',
          label: '全部'
        },
        {
          value: '1',
          label: 'APP'
        },
        {
          value: '2',
          label: 'INFO'
        },
        {
          value: '3',
          label: 'WARNNING'
        },
        {
          value: '4',
          label: 'ERROR'
        },
        {
          value: '5',
          label: 'DEBUG'
        },
        {
          value: '6',
          label: 'RELEASE'
        }
      ]
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    onSearch() {
      if (this.daterange && this.daterange.length > 0) {
        this.formData.start = parseInt(this.daterange[0].getTime() / 1000)
        this.formData.end = parseInt(this.daterange[1].getTime() / 1000)
      } else {
        this.formData.start = ''
        this.formData.end = ''
      }
      this.$emit('on-search', this.formData)
    },
    onClear() {
      this.daterange = []
      this.formData = {
        start: null,
        end: null,
        key: null,
        type: '0'
      }
      this.$emit('on-clear')
    }
  }
}
</script>
<style scoped lang="scss">
.search-form {
  background-color: white;
  padding: 23px 0 0.1px 0;
  margin-bottom: 15px;
  .el-select--medium {
    width: 100%;
  }
}
</style>
